<template>
  <div class="line1">仅供参考，不做标准。</div>
  <div class="body">
    <van-row gutter="15">
      <van-col :span="12" class="mb10">
        <van-dropdown-menu class="left">
          <van-dropdown-item v-model="province_id" :options="provinceData" @change="provinceChange"/>
        </van-dropdown-menu>
      </van-col>
      <van-col :span="12" class="mb10">
        <van-dropdown-menu class="right">
          <van-dropdown-item v-model="city_id" :options="cityData" @change="cityChange" />
        </van-dropdown-menu>
      </van-col>
      <van-col :span="12" class="mb10">
        <van-dropdown-menu class="left">
          <van-dropdown-item v-model="year" :options="yearData" @change="yearChange" />
        </van-dropdown-menu>
      </van-col>
      <van-col :span="12" class="mb10">
        <van-dropdown-menu class="right">
          <van-dropdown-item v-model="quarter" :options="quarterData" />
        </van-dropdown-menu>
      </van-col>
      <van-col :span="17" class="mb10">
        <van-field placeholder="关键词查询" v-model="searchKey"/>
      </van-col>
      <van-col :span="7" class="mb10">
        <van-button block @click="reset" class="check">查看</van-button>
      </van-col>
    </van-row>
    <van-row class="list-header">
      <van-col :span="3">序号</van-col>
      <van-col :span="14">材料名称及型号规格</van-col>
      <van-col :span="3">单位</van-col>
      <van-col :span="4">除税价</van-col>
    </van-row>
    <van-list
      class="list-content"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
    <van-row v-for="(item,index) of list" :key="item.id" :class="index % 2 != 0 ? 'bg-row': 'bg-white'">
      <van-col :span="3">{{ index + 1 }}</van-col>
      <van-col :span="14" style="text-align: left">{{ item.name }}</van-col>
      <van-col :span="3">{{ item.unit }}</van-col>
      <van-col :span="4">{{ item.price }}</van-col>
    </van-row>
    </van-list>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getOptions, getPriceData } from './api'
const provinceData = ref([{text: '请选择省份', value: '-1'}])
const cityData = ref([{text:'请选择城市', value: '-1'}])
const yearData = ref([{text: '请选择年份', value: '-1'}])
const quarterData = ref([{ text: '请选择月份/期数', value: '-1'}])
const finished = ref(false)
const loading = ref(false)
const api_key = 'ER^%Tw'
const page = ref(0)
const searchKey = ref('')
const quarter = ref('-1')
const province_id = ref('-1')
const city_id = ref('-1')
const year = ref('-1')
const list = ref([])
onMounted(() => {
  getOptionData()
})
const reset = () => {
  page.value = 1
  list.value = []
  finished.value = false
  getListData()
}
const provinceChange = id => {
  city_id.value = '-1'
  year.value = '-1'
  quarter.value = '-1'
  if (id != '-1') {
    getOptionData(2, id)
  }
  cityData.value = [{text:'请选择城市', value: '-1'}]
  yearData.value = [{text:'请选择年份', value: '-1'}]
  quarterData.value = [{text:'请选择月份/期数', value: '-1'}]
}
const cityChange = id => {
  year.value = '-1'
  quarter.value = '-1'
  if (id != '-1') {
    getOptionData(3, id)
  }
  yearData.value = [{text:'请选择年份', value: '-1'}]
  quarterData.value = [{text:'请选择月份/期数', value: '-1'}]
  console.log(city_id.value)
}
const yearChange = year => {
  quarter.value = '-1'
  if (year != '-1') {
    getOptionData(4, city_id.value ? city_id.value : province_id.value, year)
  }
  quarterData.value = [{text:'请选择月份/期数', value: '-1'}]
}
const getOptionData = (type = 1, pid, year) => {
  getOptions({type, pid, year, api_key}).then(res => {
    if (res.code == 1) {
      let option = res.data.map(item => {
        if (item.id) {
          return {
            text: item.name,
            value: item.id
          }
        } else {
          return {
            text: item,
            value: item
          }
        }
      })
      if (type == 1) {
        // 省
        option.unshift({text: '请选择省份', value: '-1'})
        provinceData.value = option
      } else if (type == 4) {
        option.unshift({text: '请选择月份/期数', value: '-1'})
        quarterData.value = option
      } else if (type == 2) {
        option.unshift({text: '请选择城市', value: '-1'})
        cityData.value = option
      } else if (type == 3) {
        option.unshift({text: '请选择年份', value: '-1'})
        yearData.value = option
      }
    }
  })
}
const getListData = () => {
  let id = ''
  if (city_id.value && city_id.value > 0) {
    id = city_id.value
  } else if (province_id.value > 0) {
    id = province_id.value
  }
  getPriceData({
    api_key,
    page: page.value,
    name: searchKey.value,
    quarter: quarter.value && quarter.value != '-1' ? quarter.value : '',
    year: year.value > 0 ? year.value : '',
    city_id: id && id != '-1' ? id : ''
  }).then(res => {
    if (res.code == 1) {
      list.value = list.value.concat(res.data)
      loading.value = false
      if (list.value.length >= res.pagination.total) {
        finished.value = true
      }
    }
  })
}
const onLoad = () => {
  page.value++
  getListData()
}
</script>
<style scoped>
.line1 {
  line-height: 28px;
  font-size: 14px;
  padding: 0px 10px;
  color: #717171;
  background: #8FE7FF;
}
.body {
  padding: 10px;
  padding-bottom: 0;
  height: calc(100vh - 38px);
  background-image: url(./assets/bgimg.png);
  background-size: contain;
}
.mb10 {
  margin-bottom: 10px;
}
.list-header {
  background: #F5F5F5;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
.list-content {
  height: calc(100vh - 245px);
  overflow-y: scroll;
  text-align: center;
  font-size: 12px;
  line-height: 28px;
}
.bg-row {
  background-color: #F5F5F5;
}
.bg-white {
  background-color: #fff;
}
.check {
  background-color: #047ABD;
  color: #fff;
  border-color: #047ABD;
  height: 40px;
  line-height: 40px;
}
:deep(.van-dropdown-menu__item) {
  justify-content: start;
  padding-left: 8px;
  height: 40px;
}
:deep(.van-dropdown-menu__title) {
  position: static;
}
:deep(.van-dropdown-menu__title:after){
  right: 15px;
  border-width: 6px;
  margin-top: -10px;
  border-color: transparent transparent #bfbfbf #bfbfbf;
}
:deep(.van-dropdown-menu__title--down:after) {
  margin-top: -1px !important;
}
:deep(.van-popup--top) {
  width: 44.9%;
  border-radius: 5px;
}
.left :deep(.van-popup--top) {
  left: 10px;
}
.right :deep(.van-popup--top) {
  right: 10px;
  left: auto;
}
:deep(.van-cell__title) {
  flex: 3;
}
:deep(.van-dropdown-menu__bar) {
  border-radius: 5px;
  height: 40px;
}
:deep(.van-field) {
  border-radius: 5px;
  height: 40px;
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
</style>